<template>
  <div class="people">
    <el-row>
      <el-col :span="2"> 员工手机 </el-col>
      <el-col :span="4">
        <el-input :inline="true" maxlength="11" v-model="userPhone"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="searchByPhone" plain
          >查询员工</el-button
        >
        <el-button @click="reset" type="warning" plain>重置</el-button>
        <el-button @click="addUser" type="success" plain>添加员工</el-button>
      </el-col>
    </el-row>

    <el-table
      :data="elTableData"
      border
      style="width: 100%"
      :header-cell-style="{
        textAlign: 'center',
        color: 'black',
        backgroundColor: '#DEE1E6',
      }"
      :cell-style="{ textAlign: 'center' }"
    >
    <el-table-column prop="id" label="员工id" width="70"> </el-table-column>
      <el-table-column prop="email" label="员工邮箱" width="150">
      </el-table-column>
      <el-table-column prop="username" label="员工用户名" width="120">
      </el-table-column>
      <el-table-column prop="nickname" label="员工姓名" width="150">
      </el-table-column>
      <el-table-column prop="phone" label="员工电话" width="120">
      </el-table-column>
      <el-table-column prop="register_time" label="注册时间" width="170">
      </el-table-column>
      <el-table-column prop="last_login_time" label="最后登录时间" width="170">
      </el-table-column>
      <el-table-column prop="address" label="操作员工" width="260">
        <template slot-scope="scope">
          <el-button type="warning" @click='updateUser(scope.row)' plain>修改员工</el-button>
          <el-button type="danger" plain @click="delUser(scope.row)">删除员工</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 70%; float: left; text-align: center">
      <el-pagination
        :current-page="elPage"
        @current-change="elchangePage"
        :page-size="4"
        layout="prev, pager, next"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
    <ylUserDialog
      title="修改员工"
      :state="dialogFormVisible"
      :data="form"
      @noCaozuo="quxiao"
      @draw="getUser"
    ></ylUserDialog>
    <ylUserDialog
      title="添加员工"
      :state="addkuang"
      :data="form"
      @noCaozuo="quxiao"
      @draw="getUser"
    ></ylUserDialog>
 
  </div>
</template>

<script>
import * as api from "../utils/api";
import ylUserDialog from '../components/ylUserDialog'
export default {
  name: "People",
  mystate(){
      return this.state
  },
  components:{ylUserDialog},
  computed: {
    elTableData(){
      let start=(this.elPage- 1)*4
      let end = (this.elPage - 1) * 4 + 4;
      return this.tableData.slice(start, end);
    }
  },
  data() {
    return {
      tableData: [],
      elPage:1,
      userPhone: "",
      dialogFormVisible: false,
      formLabelWidth: "120px",
      addkuang:false,
      form:{
          username:"",
          nickname:"",
          phone:"",
          password:""
      }
    };
  },
  created() {
    this.getUser();
  },

  methods: {
    //   查询所有的员工
    getUser() {
      this.axios({
        url: api.SELECT_ALL_USER,
        method: "get",
      }).then((data) => {
        console.log(data);
        this.userPhone = "";
        this.tableData = data.data.data;
        console.log(this.tableData);
      });
    },
    elchangePage(val) {
      // console.log(val)
      this.elPage = val;
    },
    // 按照手机号码查询员工
    searchByPhone() {
      this.axios({
        method: "get",
        url: api.SEARCH_BHONE,
        params: { phone: this.userPhone },
      }).then((data) => {
        if (data.data.data.length) {
          this.tableData = data.data.data;
          console.log(data);
        } else {
          this.$message.error("对不起，没有查询到该员工");
        }
      });
    },
    // 重置
    reset() {
      this.axios({
        url: api.SELECT_ALL_USER,
        method: "get",
      }).then((data) => {
        console.log(data);
        this.userPhone = "";
        console.log(this.userPhone);
        this.tableData = data.data.data;
        console.log(this.tableData);
      });
    },
    quxiao(propsName){
        this[propsName]=false
    },
    // 添加员工
    addUser() {
      this.addkuang=true
    },
    // 更新员工
    updateUser(item){
      this.dialogFormVisible=true
        this.form.username=item.username;
        this.form.nickname=item.nickname;
        this.form.phone=item.phone;
        this.form.password=item.password
    },
    // 删除员工
    delUser(item){
       this.$confirm('是否确认删除？注意不可恢复', '确认删除', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确认删除',
        cancelButtonText: '放弃删除'
      }).then((data)=>{
        this.axios({
          method:'post',
          url:api.DEL_USER,
          data:{id:item.id}
        }).then((data)=>{
          console.log(data)
          if(data.data.code===200){
            this.$message({
                type: 'info',
                message: '删除成功'
              });
              this.getUser()
          }else{
            this.$message({
                type: 'info',
                message: '删除失败'
              });
          }
        })
      })
    }
  },
};
</script>

<style scoped lang='less'>
input .el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
.el-col,
.el-col-2 {
  font-size: 16px;
  line-height: 70px;
}
</style>